import React, { useState } from 'react';
import { useParams } from 'react-router-dom';
import { CheckIcon, DownloadIcon, PrinterIcon, BookmarkIcon, ShareIcon, ChevronRightIcon, CheckCircleIcon, CircleIcon } from 'lucide-react';
export const ChecklistDetailPage = () => {
  const {
    id
  } = useParams();
  const [selectedTab, setSelectedTab] = useState('checklist');
  // In a real application, you would fetch checklist data based on the ID
  // This is mock data for demonstration purposes
  const checklist = {
    id: id,
    title: 'Hospital Bag Essentials',
    description: 'Everything you need to pack for your hospital stay during labor and delivery.',
    image: 'https://images.unsplash.com/photo-1522771930-78848d9293e8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    downloadCount: 15243,
    saveCount: 8752,
    stage: 'pregnancy',
    category: 'essentials',
    format: 'printable',
    lastUpdated: 'May 15, 2023',
    expertReview: 'This comprehensive checklist was reviewed by our team of certified nurse-midwives and labor & delivery nurses to ensure you have everything you need for a comfortable hospital stay.',
    sections: [{
      id: 's1',
      title: 'For Mom - Labor',
      items: [{
        id: 'i1',
        text: 'Photo ID, insurance card, and hospital paperwork',
        isChecked: false
      }, {
        id: 'i2',
        text: 'Birth plan (multiple copies)',
        isChecked: false
      }, {
        id: 'i3',
        text: "Comfortable labor outfit (if you don't want to wear the hospital gown)",
        isChecked: false
      }, {
        id: 'i4',
        text: 'Warm socks',
        isChecked: false
      }, {
        id: 'i5',
        text: 'Lip balm',
        isChecked: false
      }, {
        id: 'i6',
        text: 'Hair ties/clips',
        isChecked: false
      }, {
        id: 'i7',
        text: 'Massage oil or lotion',
        isChecked: false
      }, {
        id: 'i8',
        text: "Birthing ball (if hospital doesn't provide one)",
        isChecked: false
      }, {
        id: 'i9',
        text: 'Labor support items (music, essential oils, etc.)',
        isChecked: false
      }, {
        id: 'i10',
        text: 'Phone and charger',
        isChecked: false
      }]
    }, {
      id: 's2',
      title: 'For Mom - Postpartum',
      items: [{
        id: 'i11',
        text: 'Nursing bras (2-3)',
        isChecked: false
      }, {
        id: 'i12',
        text: 'Comfortable pajamas/nightgown that opens in front',
        isChecked: false
      }, {
        id: 'i13',
        text: 'Robe',
        isChecked: false
      }, {
        id: 'i14',
        text: 'Slippers and flip-flops for shower',
        isChecked: false
      }, {
        id: 'i15',
        text: 'Maternity pads (hospitals provide some, but you may want your own)',
        isChecked: false
      }, {
        id: 'i16',
        text: 'Comfortable going-home outfit (still need maternity clothes)',
        isChecked: false
      }, {
        id: 'i17',
        text: 'Toiletries (toothbrush, toothpaste, shampoo, face wash, etc.)',
        isChecked: false
      }, {
        id: 'i18',
        text: 'Makeup and hairbrush (for photos)',
        isChecked: false
      }, {
        id: 'i19',
        text: 'Nursing pillow',
        isChecked: false
      }, {
        id: 'i20',
        text: 'Nipple cream',
        isChecked: false
      }]
    }, {
      id: 's3',
      title: 'For Baby',
      items: [{
        id: 'i21',
        text: 'Car seat (properly installed in your car)',
        isChecked: false
      }, {
        id: 'i22',
        text: 'Going-home outfit (weather appropriate)',
        isChecked: false
      }, {
        id: 'i23',
        text: 'Hat and socks',
        isChecked: false
      }, {
        id: 'i24',
        text: 'Swaddle blanket',
        isChecked: false
      }, {
        id: 'i25',
        text: 'Burp cloths',
        isChecked: false
      }]
    }, {
      id: 's4',
      title: 'For Partner/Support Person',
      items: [{
        id: 'i26',
        text: 'Change of clothes',
        isChecked: false
      }, {
        id: 'i27',
        text: 'Toiletries',
        isChecked: false
      }, {
        id: 'i28',
        text: 'Snacks and water bottle',
        isChecked: false
      }, {
        id: 'i29',
        text: 'Phone charger',
        isChecked: false
      }, {
        id: 'i30',
        text: 'Camera',
        isChecked: false
      }, {
        id: 'i31',
        text: 'Entertainment (books, tablet, etc.)',
        isChecked: false
      }, {
        id: 'i32',
        text: 'Pillow and blanket (hospitals often only provide these for the patient)',
        isChecked: false
      }]
    }, {
      id: 's5',
      title: 'Miscellaneous',
      items: [{
        id: 'i33',
        text: 'Snacks and drinks',
        isChecked: false
      }, {
        id: 'i34',
        text: 'Cash for vending machines',
        isChecked: false
      }, {
        id: 'i35',
        text: 'Contact list for birth announcements',
        isChecked: false
      }]
    }],
    relatedChecklists: [{
      id: 'cl2',
      title: 'Newborn Essentials',
      image: 'https://images.unsplash.com/photo-1515488042361-ee00e0ddd4e4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
      itemCount: 42
    }, {
      id: 'cl3',
      title: 'Baby-Proofing Checklist',
      image: 'https://images.unsplash.com/photo-1566004100631-35d015d6a491?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
      itemCount: 28
    }, {
      id: 'cl5',
      title: 'Baby First Aid Kit',
      image: 'https://images.unsplash.com/photo-1584308666744-24d5c474f2ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
      itemCount: 18
    }]
  };
  // State for checklist items
  const [sections, setSections] = useState(checklist.sections);
  // Toggle checked state of an item
  const toggleItemCheck = (sectionId, itemId) => {
    setSections(prevSections => prevSections.map(section => {
      if (section.id === sectionId) {
        return {
          ...section,
          items: section.items.map(item => item.id === itemId ? {
            ...item,
            isChecked: !item.isChecked
          } : item)
        };
      }
      return section;
    }));
  };
  // Check all items in a section
  const checkAllInSection = sectionId => {
    setSections(prevSections => prevSections.map(section => {
      if (section.id === sectionId) {
        return {
          ...section,
          items: section.items.map(item => ({
            ...item,
            isChecked: true
          }))
        };
      }
      return section;
    }));
  };
  // Uncheck all items in a section
  const uncheckAllInSection = sectionId => {
    setSections(prevSections => prevSections.map(section => {
      if (section.id === sectionId) {
        return {
          ...section,
          items: section.items.map(item => ({
            ...item,
            isChecked: false
          }))
        };
      }
      return section;
    }));
  };
  // Check all items in the checklist
  const checkAll = () => {
    setSections(prevSections => prevSections.map(section => ({
      ...section,
      items: section.items.map(item => ({
        ...item,
        isChecked: true
      }))
    })));
  };
  // Uncheck all items in the checklist
  const uncheckAll = () => {
    setSections(prevSections => prevSections.map(section => ({
      ...section,
      items: section.items.map(item => ({
        ...item,
        isChecked: false
      }))
    })));
  };
  // Calculate progress
  const totalItems = sections.reduce((acc, section) => acc + section.items.length, 0);
  const checkedItems = sections.reduce((acc, section) => acc + section.items.filter(item => item.isChecked).length, 0);
  const progress = totalItems > 0 ? Math.round(checkedItems / totalItems * 100) : 0;
  return <div className="w-full bg-cream">
      <div className="container mx-auto px-4 md:px-6 py-8">
        {/* Breadcrumbs */}
        <nav className="flex text-sm mb-6">
          <ol className="flex items-center space-x-2">
            <li>
              <a href="/" className="text-gray-500 hover:text-terracotta">
                Home
              </a>
            </li>
            <li className="text-gray-500">/</li>
            <li>
              <a href="/checklists" className="text-gray-500 hover:text-terracotta">
                Checklists
              </a>
            </li>
            <li className="text-gray-500">/</li>
            <li className="text-dark font-medium">{checklist.title}</li>
          </ol>
        </nav>
        {/* Checklist Header */}
        <div className="flex flex-col md:flex-row gap-6 mb-8">
          <div className="md:w-1/3">
            <div className="aspect-[4/3] w-full rounded-lg overflow-hidden">
              <img src={checklist.image} alt={checklist.title} className="w-full h-full object-cover" />
            </div>
          </div>
          <div className="md:w-2/3">
            <h1 className="font-nunito font-bold text-3xl text-dark mb-3">
              {checklist.title}
            </h1>
            <p className="text-gray-600 mb-4">{checklist.description}</p>
            <div className="flex flex-wrap gap-3 mb-4">
              <span className="inline-block px-3 py-1 bg-terracotta/10 text-terracotta rounded-full text-sm font-medium">
                {checklist.stage.charAt(0).toUpperCase() + checklist.stage.slice(1)}
              </span>
              <span className="inline-block px-3 py-1 bg-yellow/10 text-yellow-800 rounded-full text-sm font-medium">
                {checklist.category.charAt(0).toUpperCase() + checklist.category.slice(1)}
              </span>
              <span className="inline-block px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm font-medium">
                {checklist.format === 'printable' ? 'PDF' : checklist.format === 'interactive' ? 'Interactive' : 'App Compatible'}
              </span>
            </div>
            <div className="flex items-center text-sm text-gray-500 mb-6">
              <span>Last updated: {checklist.lastUpdated}</span>
              <span className="mx-3">•</span>
              <span className="flex items-center">
                <DownloadIcon size={14} className="mr-1" />
                {(checklist.downloadCount / 1000).toFixed(1)}k downloads
              </span>
              <span className="mx-3">•</span>
              <span className="flex items-center">
                <BookmarkIcon size={14} className="mr-1" />
                {(checklist.saveCount / 1000).toFixed(1)}k saves
              </span>
            </div>
            <div className="flex flex-wrap gap-3">
              <button className="bg-terracotta text-white px-4 py-2 rounded-md hover:bg-terracotta/90 transition-colors text-sm font-medium flex items-center">
                <DownloadIcon size={16} className="mr-2" />
                Download PDF
              </button>
              <button className="bg-white text-dark px-4 py-2 rounded-md hover:bg-gray-50 transition-colors text-sm font-medium border border-gray-200 flex items-center">
                <PrinterIcon size={16} className="mr-2" />
                Print
              </button>
              <button className="bg-white text-dark px-4 py-2 rounded-md hover:bg-gray-50 transition-colors text-sm font-medium border border-gray-200 flex items-center">
                <BookmarkIcon size={16} className="mr-2" />
                Save
              </button>
              <button className="bg-white text-dark px-4 py-2 rounded-md hover:bg-gray-50 transition-colors text-sm font-medium border border-gray-200 flex items-center">
                <ShareIcon size={16} className="mr-2" />
                Share
              </button>
            </div>
          </div>
        </div>
        {/* Progress Bar */}
        <div className="bg-white p-6 rounded-lg shadow-sm mb-8">
          <div className="flex justify-between items-center mb-2">
            <h2 className="font-nunito font-semibold text-lg">Your Progress</h2>
            <span className="text-sm font-medium">
              {checkedItems} of {totalItems} items checked
            </span>
          </div>
          <div className="h-3 bg-gray-200 rounded-full mb-4">
            <div className="h-3 bg-terracotta rounded-full" style={{
            width: `${progress}%`
          }}></div>
          </div>
          <div className="flex justify-between">
            <div className="flex items-center">
              <span className="text-2xl font-bold text-terracotta">
                {progress}%
              </span>
              <span className="text-sm text-gray-500 ml-2">Complete</span>
            </div>
            <div className="flex space-x-3">
              <button onClick={checkAll} className="text-sm text-terracotta hover:text-terracotta/80 font-medium">
                Check All
              </button>
              <button onClick={uncheckAll} className="text-sm text-gray-500 hover:text-gray-700 font-medium">
                Uncheck All
              </button>
            </div>
          </div>
        </div>
        {/* Tabs */}
        <div className="flex border-b border-gray-200 mb-6">
          <button className={`py-3 px-6 font-medium ${selectedTab === 'checklist' ? 'text-terracotta border-b-2 border-terracotta' : 'text-gray-500 hover:text-terracotta'}`} onClick={() => setSelectedTab('checklist')}>
            Checklist
          </button>
          <button className={`py-3 px-6 font-medium ${selectedTab === 'notes' ? 'text-terracotta border-b-2 border-terracotta' : 'text-gray-500 hover:text-terracotta'}`} onClick={() => setSelectedTab('notes')}>
            Notes
          </button>
          <button className={`py-3 px-6 font-medium ${selectedTab === 'expert' ? 'text-terracotta border-b-2 border-terracotta' : 'text-gray-500 hover:text-terracotta'}`} onClick={() => setSelectedTab('expert')}>
            Expert Advice
          </button>
        </div>
        {/* Tab Content */}
        <div className="mb-12">
          {selectedTab === 'checklist' && <div className="space-y-8">
              {sections.map(section => <div key={section.id} className="bg-white p-6 rounded-lg shadow-sm">
                  <div className="flex justify-between items-center mb-4">
                    <h2 className="font-nunito font-semibold text-xl">
                      {section.title}
                    </h2>
                    <div className="flex space-x-3">
                      <button onClick={() => checkAllInSection(section.id)} className="text-xs text-terracotta hover:text-terracotta/80">
                        Check All
                      </button>
                      <button onClick={() => uncheckAllInSection(section.id)} className="text-xs text-gray-500 hover:text-gray-700">
                        Uncheck All
                      </button>
                    </div>
                  </div>
                  <ul className="space-y-3">
                    {section.items.map(item => <li key={item.id} className="flex items-center">
                        <button onClick={() => toggleItemCheck(section.id, item.id)} className="mr-3 text-gray-400 hover:text-terracotta">
                          {item.isChecked ? <CheckCircleIcon size={20} className="text-terracotta" /> : <CircleIcon size={20} />}
                        </button>
                        <span className={`${item.isChecked ? 'line-through text-gray-400' : 'text-gray-700'}`}>
                          {item.text}
                        </span>
                      </li>)}
                  </ul>
                </div>)}
            </div>}
          {selectedTab === 'notes' && <div className="bg-white p-6 rounded-lg shadow-sm">
              <h2 className="font-nunito font-semibold text-xl mb-4">
                Your Notes
              </h2>
              <p className="text-gray-500 mb-4">
                Add personal notes to customize your checklist.
              </p>
              <textarea className="w-full border border-gray-300 rounded-md p-3 min-h-[200px] focus:outline-none focus:ring-2 focus:ring-terracotta/30" placeholder="Add your notes here..."></textarea>
              <div className="mt-4 flex justify-end">
                <button className="bg-terracotta text-white px-4 py-2 rounded-md hover:bg-terracotta/90 transition-colors text-sm font-medium">
                  Save Notes
                </button>
              </div>
            </div>}
          {selectedTab === 'expert' && <div className="bg-white p-6 rounded-lg shadow-sm">
              <div className="flex items-center mb-4">
                <div className="h-10 w-10 rounded-full bg-terracotta/20 text-terracotta flex items-center justify-center mr-3">
                  <CheckIcon size={20} />
                </div>
                <h2 className="font-nunito font-semibold text-xl">
                  Expert Advice
                </h2>
              </div>
              <p className="text-gray-600 mb-6">{checklist.expertReview}</p>
              <h3 className="font-medium text-lg mb-3">Additional Tips</h3>
              <ul className="space-y-3 mb-6">
                <li className="flex items-start">
                  <CheckIcon size={18} className="text-terracotta mr-2 mt-1 shrink-0" />
                  <span>
                    Pack your bag at least 3-4 weeks before your due date in
                    case of early labor.
                  </span>
                </li>
                <li className="flex items-start">
                  <CheckIcon size={18} className="text-terracotta mr-2 mt-1 shrink-0" />
                  <span>
                    Keep a separate list of last-minute items to grab as you
                    head to the hospital.
                  </span>
                </li>
                <li className="flex items-start">
                  <CheckIcon size={18} className="text-terracotta mr-2 mt-1 shrink-0" />
                  <span>
                    Consider packing separate bags for labor/delivery and
                    postpartum stay for easier access.
                  </span>
                </li>
                <li className="flex items-start">
                  <CheckIcon size={18} className="text-terracotta mr-2 mt-1 shrink-0" />
                  <span>
                    Remember that hospitals provide many essentials for baby, so
                    check with your facility about what they supply.
                  </span>
                </li>
              </ul>
              <div className="bg-cream p-4 rounded-md">
                <h3 className="font-medium mb-2">Expert Contributor</h3>
                <p className="text-sm text-gray-600">
                  This checklist was reviewed and approved by Sarah Johnson,
                  Certified Nurse-Midwife with 15 years of experience in labor
                  and delivery.
                </p>
              </div>
            </div>}
        </div>
        {/* Related Checklists */}
        <div>
          <div className="flex justify-between items-center mb-6">
            <h2 className="font-nunito font-semibold text-2xl text-dark">
              Related Checklists
            </h2>
            <a href="/checklists" className="text-terracotta hover:text-terracotta/80 flex items-center text-sm font-medium">
              View all checklists
              <ChevronRightIcon size={16} className="ml-1" />
            </a>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {checklist.relatedChecklists.map(item => <a key={item.id} href={`/checklists/${item.id}`} className="group bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow border border-gray-100">
                <div className="aspect-[4/3] w-full">
                  <img src={item.image} alt={item.title} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
                </div>
                <div className="p-5">
                  <h3 className="font-nunito font-semibold text-lg mb-3">
                    {item.title}
                  </h3>
                  <div className="flex items-center text-sm text-gray-500">
                    <CheckIcon size={14} className="mr-1" />
                    <span>{item.itemCount} items</span>
                  </div>
                </div>
              </a>)}
          </div>
        </div>
      </div>
    </div>;
};